<template>
  <div class="wrapper">
	  <div class="title"><span>//////////////</span><h1>周末出游</h1><span>//////////////</span></div>
	  <p>致力推荐超完美套餐</p>
	  <swiper :options="swiperOption" ref="mySwiperA" class='swiper'>
		<swiper-slide v-for='item of swiperList' :key='item.id'>
			<div class="swiper-content" @click='swiperClick(item.path)'>
				<img class='swiper-img' :src="item.imgUrl">
				<h2>{{item.title}}</h2>
				<p>{{item.desc}}</p>
			</div>
		</swiper-slide>
	  </swiper>
  </div>
</template>
<script>
export default {
  name: 'travel_homeScrollSwiper',
  props:{
	 
  },
  data(){
	  return {
		  swiperOption:{
			  freeMode:true,
			  spaceBetween:10,
			  slidesPerView:2.5
		  },
		  swiperList:[
			  {
				  id:'001',
				  imgUrl:'https://pic5.40017.cn/03/000/02/a7/rB5oQFzj5j-AH29kAAGD0KnMnhg015_280x190_00.jpg',
				  title:'杨梅采摘季',
				  desc:'双人578起住香格里拉',
				  path:'/'
			  },
			  {
				  id:'002',
				  imgUrl:'https://pic5.40017.cn/03/000/b0/29/rB5oQFyUnJ6ANIHUAACw7YKzA3E742_280x190_00.jpg',
				  title:'畅游西塘古镇',
				  desc:'住华源轩客栈',
				   path:'/'
			  },
			   {
				  id:'003',
				  imgUrl:'https://pic5.40017.cn/03/000/8c/da/rB5oQFwZtfyABsmlAABcBH79wXs668_280x190_00.jpg',
				  title:'拈花湾',
				  desc:'禅意假日 古韵风光',
				   path:'/'
			  },
			   {
				  id:'004',
				  imgUrl:'https://pic5.40017.cn/03/000/b0/29/rB5oQFyUnJ6ANIHUAACw7YKzA3E742_280x190_00.jpg',
				  title:'黄山',
				  desc:'黄山归来不看岳',
				   path:'/'
			  },
			   {
				  id:'005',
				  imgUrl:'https://pic5.40017.cn/03/000/52/09/rB5oQFy2lJiAX8VmAAH-qfnS23k464_280x190_00.jpg',
				  title:'看宋城千古情',
				  desc:'梦回大宋',
				   path:'/'
			  },
			   {
				  id:'006',
				  imgUrl:'https://pic5.40017.cn/02/000/f8/b9/rBLkCFsWfOSAKWiGAABRaPAf0aA516_280x190_00.jpg',
				  title:'天目湖',
				  desc:'竹海 山水 温泉 古街',
				   path:'/'
			  },
			  {
				  id:'007',
				  imgUrl:'https://pic5.40017.cn/01/000/6b/79/rBANC1qvMoyAcRONAAA-67QqIto040_280x190_00.jpg',
				  title:'三清山',
				  desc:'漫步云端，聆听花开',
				   path:'/'
			  }
		  ]
	  }
  },
	computed: {
        swiper() {
          return this.$refs.mySwiperA.swiper
        }
    },
	methods:{
		swiperClick(path){
			this.$router.push(path)
		}
	},
  mounted() {
        //console.log("每次切换都会触发我");
        //this.swiper.slideTo(1, 1000, false)
     }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	width:100%
	border-bottom:8px solid #edf0f5
	p
		text-align:center
	.title
		display:flex
		padding:0.2rem
		margin:0 auto
		width:60%
		text-align:center
		h1
			width:40%
			font-size:0.4rem
			font-weight:bold
		span
			width:35%
			color:#ccc
			margin:auto
	.swiper
		margin:0.2rem
		.swiper-content
			width:100%
			border:1px solid #ccc
			border-radius:0.1rem
			display:block
			text-align:center
			h2
				margin-top:0.3rem
				font-weight:bold
				font-size:0.3rem
			p
				margin:0.15rem 0 0.3rem 0
				font-size:0.2rem
			.swiper-img
				width:100%
				border-top-left-radius:0.1rem
				border-top-right-radius:0.1rem
</style>
